<template>
  <div class="hello">
    <router-link to='/index'>首页</router-link>

    <div id="myChart" :style="{width: '300px', height: '300px'}"></div>

    <div id="myChart1" :style="{width: '300px', height: '300px'}"></div>
  </div>
</template>

<script>
  import echarts from 'echarts'
  import obj from '../../node_modules/echarts/map/json/province/anhui'
  export default {
    name: 'HelloWorld',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
      }
    },
    mounted() {
      // this.drawLine();
      // this.drawLine1();
      this.drawLine2();
    },
    methods: {
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
          title: {
            text: '标题'
          },
          tooltip: {},
          xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }]
        });
      },
      drawLine1() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart1'))
        // 绘制图表
        var colors = ['#5793f3', '#d14a61', '#675bba'];
        myChart.setOption({
          color: colors,
          tooltip: {
            trigger: 'none',
            axisPointer: {
              type: 'cross'
            }
          },
          legend: {
            data: ['2015 降水量', '2016 降水量']
          },
          grid: {
            top: 70,
            bottom: 50
          },
          xAxis: [{
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: colors[1]
              }
            },
            axisPointer: {
              label: {
                formatter: function(params) {
                  return '降水量  ' + params.value +
                    (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                }
              }
            },
            data: ['2016-1', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', '2016-7', '2016-8', '2016-9',
              '2016-10', '2016-11', '2016-12'
            ]
          },
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              axisLine: {
                onZero: false,
                lineStyle: {
                  color: colors[0]
                }
              },
              axisPointer: {
                label: {
                  formatter: function(params) {
                    return '降水量  ' + params.value +
                      (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                  }
                }
              },
              data: ['2015-1', '2015-2', '2015-3', '2015-4', '2015-5', '2015-6', '2015-7', '2015-8', '2015-9',
                '2015-10', '2015-11', '2015-12'
              ]
            }
          ],
          yAxis: [{
            type: 'value'
          }],
          series: [{
            name: '2015 降水量',
            type: 'line',
            xAxisIndex: 1,
            smooth: true,
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
          },
            {
              name: '2016 降水量',
              type: 'line',
              smooth: true,
              data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7]
            }
          ]
        });
      },

      drawLine2() {
        let myChart = this.$echarts.init(document.getElementById('myChart1'))
        // myChart.showLoading();
console.log(obj)
        echarts.registerMap('xianggang', obj);

        myChart.setOption({
          title: {
            text: '香港18区人口密度 （2011）',
            // subtext: '人口密度数据来自Wikipedia',
            // sublink: 'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b}<br/>{c} (p / km2)'
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              dataView: {readOnly: false},
              restore: {},
              saveAsImage: {}
            }
          },
          visualMap: {
            min: 800,
            max: 50000,
            text: ['High', 'Low'],
            realtime: false,
            calculable: true,
            inRange: {
              color: ['lightskyblue', 'yellow', 'orangered']
            }
          },
          series: [
            {
              name: '香港18区人口密度',
              type: 'map',
              mapType: 'HK', // 自定义扩展图表类型
              label: {
                show: true
              },
              data: [
                {name: '中西区', value: 20057.34},
                {name: '湾仔', value: 15477.48},
                {name: '东区', value: 31686.1},
                {name: '南区', value: 6992.6},
                {name: '油尖旺', value: 44045.49},
                {name: '深水埗', value: 40689.64},
                {name: '九龙城', value: 37659.78},
                {name: '黄大仙', value: 45180.97},
                {name: '观塘', value: 55204.26},
                {name: '葵青', value: 21900.9},
                {name: '荃湾', value: 4918.26},
                {name: '屯门', value: 5881.84},
                {name: '元朗', value: 4178.01},
                {name: '北区', value: 2227.92},
                {name: '大埔', value: 2180.98},
                {name: '沙田', value: 9172.94},
                {name: '西贡', value: 3368},
                {name: '离岛', value: 806.98}
              ],
              // 自定义名称映射
              nameMap: {
                'Central and Western': '中西区',
                'Eastern': '东区',
                'Islands': '离岛',
                'Kowloon City': '九龙城',
                'Kwai Tsing': '葵青',
                'Kwun Tong': '观塘',
                'North': '北区',
                'Sai Kung': '西贡',
                'Sha Tin': '沙田',
                'Sham Shui Po': '深水埗',
                'Southern': '南区',
                'Tai Po': '大埔',
                'Tsuen Wan': '荃湾',
                'Tuen Mun': '屯门',
                'Wan Chai': '湾仔',
                'Wong Tai Sin': '黄大仙',
                'Yau Tsim Mong': '油尖旺',
                'Yuen Long': '元朗'
              }
            }
          ]
        });

        // myChart.setOption(option = {
        //   title: {
        //     text: '香港18区人口密度 （2011）',
        //     subtext: '人口密度数据来自Wikipedia',
        //     sublink: 'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
        //   },
        //   tooltip: {
        //     trigger: 'item',
        //     formatter: '{b}<br/>{c} (p / km2)'
        //   },
        //   toolbox: {
        //     show: true,
        //     orient: 'vertical',
        //     left: 'right',
        //     top: 'center',
        //     feature: {
        //       dataView: {readOnly: false},
        //       restore: {},
        //       saveAsImage: {}
        //     }
        //   },
        //   visualMap: {
        //     min: 800,
        //     max: 50000,
        //     text: ['High', 'Low'],
        //     realtime: false,
        //     calculable: true,
        //     inRange: {
        //       color: ['lightskyblue', 'yellow', 'orangered']
        //     }
        //   },
        //   series: [
        //     {
        //       name: '香港18区人口密度',
        //       type: 'map',
        //       mapType: 'HK', // 自定义扩展图表类型
        //       label: {
        //         show: true
        //       },
        //       data: [
        //         {name: '中西区', value: 20057.34},
        //         {name: '湾仔', value: 15477.48},
        //         {name: '东区', value: 31686.1},
        //         {name: '南区', value: 6992.6},
        //         {name: '油尖旺', value: 44045.49},
        //         {name: '深水埗', value: 40689.64},
        //         {name: '九龙城', value: 37659.78},
        //         {name: '黄大仙', value: 45180.97},
        //         {name: '观塘', value: 55204.26},
        //         {name: '葵青', value: 21900.9},
        //         {name: '荃湾', value: 4918.26},
        //         {name: '屯门', value: 5881.84},
        //         {name: '元朗', value: 4178.01},
        //         {name: '北区', value: 2227.92},
        //         {name: '大埔', value: 2180.98},
        //         {name: '沙田', value: 9172.94},
        //         {name: '西贡', value: 3368},
        //         {name: '离岛', value: 806.98}
        //       ],
        //       // 自定义名称映射
        //       nameMap: {
        //         'Central and Western': '中西区',
        //         'Eastern': '东区',
        //         'Islands': '离岛',
        //         'Kowloon City': '九龙城',
        //         'Kwai Tsing': '葵青',
        //         'Kwun Tong': '观塘',
        //         'North': '北区',
        //         'Sai Kung': '西贡',
        //         'Sha Tin': '沙田',
        //         'Sham Shui Po': '深水埗',
        //         'Southern': '南区',
        //         'Tai Po': '大埔',
        //         'Tsuen Wan': '荃湾',
        //         'Tuen Mun': '屯门',
        //         'Wan Chai': '湾仔',
        //         'Wong Tai Sin': '黄大仙',
        //         'Yau Tsim Mong': '油尖旺',
        //         'Yuen Long': '元朗'
        //       }
        //     }
        //   ]
        // });

        this.$http.get('api/anhui.json', function (geoJson) {
console.log(geoJson)
          myChart.hideLoading();

          echarts.registerMap('xianggang', geoJson);

          myChart.setOption(option = {
            title: {
              text: '香港18区人口密度 （2011）',
              subtext: '人口密度数据来自Wikipedia',
              sublink: 'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
            },
            tooltip: {
              trigger: 'item',
              formatter: '{b}<br/>{c} (p / km2)'
            },
            toolbox: {
              show: true,
              orient: 'vertical',
              left: 'right',
              top: 'center',
              feature: {
                dataView: {readOnly: false},
                restore: {},
                saveAsImage: {}
              }
            },
            visualMap: {
              min: 800,
              max: 50000,
              text: ['High', 'Low'],
              realtime: false,
              calculable: true,
              inRange: {
                color: ['lightskyblue', 'yellow', 'orangered']
              }
            },
            series: [
              {
                name: '香港18区人口密度',
                type: 'map',
                mapType: 'HK', // 自定义扩展图表类型
                label: {
                  show: true
                },
                data: [
                  {name: '中西区', value: 20057.34},
                  {name: '湾仔', value: 15477.48},
                  {name: '东区', value: 31686.1},
                  {name: '南区', value: 6992.6},
                  {name: '油尖旺', value: 44045.49},
                  {name: '深水埗', value: 40689.64},
                  {name: '九龙城', value: 37659.78},
                  {name: '黄大仙', value: 45180.97},
                  {name: '观塘', value: 55204.26},
                  {name: '葵青', value: 21900.9},
                  {name: '荃湾', value: 4918.26},
                  {name: '屯门', value: 5881.84},
                  {name: '元朗', value: 4178.01},
                  {name: '北区', value: 2227.92},
                  {name: '大埔', value: 2180.98},
                  {name: '沙田', value: 9172.94},
                  {name: '西贡', value: 3368},
                  {name: '离岛', value: 806.98}
                ],
                // 自定义名称映射
                nameMap: {
                  'Central and Western': '中西区',
                  'Eastern': '东区',
                  'Islands': '离岛',
                  'Kowloon City': '九龙城',
                  'Kwai Tsing': '葵青',
                  'Kwun Tong': '观塘',
                  'North': '北区',
                  'Sai Kung': '西贡',
                  'Sha Tin': '沙田',
                  'Sham Shui Po': '深水埗',
                  'Southern': '南区',
                  'Tai Po': '大埔',
                  'Tsuen Wan': '荃湾',
                  'Tuen Mun': '屯门',
                  'Wan Chai': '湾仔',
                  'Wong Tai Sin': '黄大仙',
                  'Yau Tsim Mong': '油尖旺',
                  'Yuen Long': '元朗'
                }
              }
            ]
          });
        });
      }
    }
  }
</script>

<style lang="less" scoped>

</style>



<!--<template>-->
<!--  <div>-->
<!--    <div id="map"></div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--  import china from 'echarts/map/js/china';-->
<!--  import echarts from 'echarts/lib/echarts'-->
<!--  import 'echarts/lib/component/tooltip'-->
<!--  import 'echarts/lib/component/title'-->
<!--  import 'echarts/lib/component/legend'-->
<!--  import 'echarts/extension/bmap/bmap'-->

<!--  export default {-->
<!--    data() {-->
<!--      return {-->

<!--      }-->
<!--    },-->
<!--    mounted() {-->
<!--      this.add()-->
<!--    },-->
<!--    methods:{-->
<!--      add(){-->
<!--        this.$http.get('api/sichuan.json').then( geoJson => {-->
<!--          // echarts.registerMap('.sichuan',geoJson.data);-->
<!--          let myart = echarts.init(document.getElementById('map'));-->
<!--          var option = {-->
<!--            title: {-->
<!--              text: '选择所要查询的数据维度',-->
<!--              top: '3%',-->
<!--              left: '5%',-->
<!--              textStyle: {-->
<!--                fontSize: 18,-->
<!--                fontWeight: 300,-->
<!--                color: '#b6d7ff'-->
<!--              }-->
<!--            },-->
<!--            tooltip: {-->
<!--              padding: 0,-->
<!--              backgroundColor: 'transparent',-->
<!--              formatter: params => {-->
<!--                // params.data-->
<!--                return `<table class="map__tooltip o_font20">-->
<!--                                    <thead>-->
<!--                                       <tr>-->
<!--                                           <th>总购买人数</th>-->
<!--                                           <th>本年度总购买人数</th>-->
<!--                                           <th>本月度总购买人数</th>-->
<!--                                           <th>总完成人数</th>-->
<!--                                        </tr>-->
<!--                                    </thead>-->
<!--                                    <tbody>-->
<!--                                        <tr>-->
<!--                                            <th>${params.data.obj.a}</th>-->
<!--                                            <th>${params.data.obj.b}</th>-->
<!--                                            <th>${params.data.obj.c}</th>-->
<!--                                            <th>${params.data.obj.d}</th>-->
<!--                                         </tr>-->
<!--                                    </tbody>-->
<!--                                </table>`;-->
<!--              }-->
<!--            },-->
<!--            legend: {-->
<!--              orient: 'vertical',-->
<!--              top: '9%',-->
<!--              left: '5%',-->
<!--              icon: 'circle',-->
<!--              data: [],-->
<!--              selectedMode: 'single',-->
<!--              selected: {},-->
<!--              itemWidth: 12,-->
<!--              itemHeight: 12,-->
<!--              itemGap: 30,-->
<!--              inactiveColor: '#b6d7ff',-->
<!--              textStyle: {-->
<!--                color: '#ec808d',-->
<!--                fontSize: 14,-->
<!--                fontWeight: 300,-->
<!--                padding: [0, 0, 0, 15]-->
<!--              }-->
<!--            },-->
<!--            visualMap: {-->
<!--              min: 0,-->
<!--              max: 500,-->
<!--              show: false,-->
<!--              splitNumber: 5,-->
<!--              inRange: {-->
<!--                color: ['#FACD91', '#74DFB2', '#81D3F8', '#768FDE', '#e9969f'].reverse()-->
<!--              },-->
<!--              textStyle: {-->
<!--                color: '#fff'-->
<!--              }-->
<!--            },-->
<!--            geo: {-->
<!--              map: '重庆',-->
<!--              label: {-->
<!--                normal: {-->
<!--                  show: true,-->
<!--                  color: '#000'-->
<!--                },-->
<!--                emphasis: {-->
<!--                  show: true,-->
<!--                  color: '#fff'-->
<!--                }-->
<!--              },-->
<!--              roam: false,-->
<!--              itemStyle: {-->
<!--                normal: {-->
<!--                  areaColor: '#8db200',-->
<!--                  borderColor: '#6367ad',-->
<!--                  borderWidth: 1-->
<!--                },-->
<!--                emphasis: {-->
<!--                  areaColor: '#feb6aa' // hover效果-->
<!--                }-->
<!--              },-->
<!--              left: '5%',-->
<!--              right: '5%',-->
<!--              top: '5%',-->
<!--              bottom: '5%'-->
<!--            },-->
<!--            series: [{-->
<!--              name: '年度总项目数据查询',-->
<!--              type: 'map',-->
<!--              geoIndex: 0, // 不可缺少，否则无tooltip 指示效果-->
<!--              data: []-->
<!--            }]-->
<!--            // visualMap: {-->
<!--            //   min: 0,-->
<!--            //   max: 500,-->
<!--            //   show: false,-->
<!--            //   splitNumber: 5,-->
<!--            //   inRange: {-->
<!--            //     color: ['#d94e5d', '#eac736', '#50a3ba'].reverse()-->
<!--            //   },-->
<!--            //   textStyle: {-->
<!--            //     color: '#fff'-->
<!--            //   }-->
<!--            // },-->
<!--            // geo: {-->
<!--            //   map: '云南',-->
<!--            //   label: {-->
<!--            //     normal: {-->
<!--            //       show: true,-->
<!--            //       color: '#fff'-->
<!--            //     },-->
<!--            //     emphasis: {-->
<!--            //       show: true,-->
<!--            //       color: '#fff'-->
<!--            //     }-->
<!--            //   },-->
<!--            //   roam: false,-->
<!--            //   itemStyle: {-->
<!--            //     normal: {-->
<!--            //       areaColor: '#40458e',-->
<!--            //       borderColor: '#6367ad',-->
<!--            //       borderWidth: 1.5-->
<!--            //     },-->
<!--            //     emphasis: {-->
<!--            //       areaColor: '#40458e'-->
<!--            //     }-->
<!--            //   },-->
<!--            //   "left": 0,-->
<!--            //   "right": 0,-->
<!--            //   "top": 0,-->
<!--            //   "bottom": 0-->
<!--            // },-->
<!--            // series: [{-->
<!--            //   name: '活跃人数分布',-->
<!--            //   type: 'heatmap',-->
<!--            //   coordinateSystem: 'geo',-->
<!--            //   blurSize: 30,-->
<!--            //   data: []-->
<!--            // }]-->


<!--          };-->
<!--          myart.setOption(option)-->
<!--        })-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--</script>-->

<!--<style>-->

<!--</style>-->





<!--<template>-->
<!--  <div class="maps-container">-->
<!--    <div id="main" style="width:100%; height:100%"></div>-->
<!--  </div>-->
<!--</template>-->
<!--<script>-->
<!--  import 'echarts/lib/component/tooltip'-->
<!--  import 'echarts/lib/component/title'-->
<!--  import 'echarts/lib/component/legend'-->
<!--  import 'echarts/extension/bmap/bmap'-->
<!--  import "echarts/map/js/province/yunnan.js";-->
<!--  // import obj from "echarts/map/json/province/yunnan.json";-->
<!--  import obj from "../../node_modules/echarts/map/json/province/yunnan.json";-->
<!--  console.log(obj);-->
<!--  export default {-->
<!--    data() {-->
<!--      return {-->
<!--        listArr: [], //城市json-->
<!--        max: "", //最大value值-->
<!--        min: "" // 最小value值-->
<!--      };-->
<!--    },-->
<!--    created() {-->
<!--      this.getData();-->
<!--    },-->
<!--    mounted() {-->
<!--      this.DrawMap();-->
<!--    },-->
<!--    methods: {-->
<!--      getData() {-->
<!--        // 获取城市名称数据-->
<!--        console.log("取到的云南省的json数据", obj);-->
<!--        if (obj) {-->
<!--          let arr = obj.features;-->
<!--          // 循环取出 城市名称和value值-->
<!--          for (var j = 0; j < arr.length; j++) {-->
<!--            this.max = arr[0].id;-->
<!--            this.min = arr[0].id;-->
<!--            if (arr[j].id > this.max) {-->
<!--              this.max = arr[j].id;-->
<!--            }-->
<!--            if (arr[j].id < this.min) {-->
<!--              this.min = arr[j].id;-->
<!--            }-->
<!--            this.listArr.push({-->
<!--              name: arr[j].properties.name,-->
<!--              value: arr[j].id-->
<!--            });-->
<!--          }-->
<!--        }-->
<!--      },-->
<!--      DrawMap() {-->
<!--        let _this = this;-->
<!--        let myChart8 = this.$echarts.init(document.getElementById("main"));-->
<!--        console.log(-->
<!--          "最大value值",-->
<!--          this.max,-->
<!--          "\n",-->
<!--          "最小value值",-->
<!--          this.min,-->
<!--          "\n",-->
<!--          "城市数据",-->
<!--          this.listArr-->
<!--        );-->
<!--        myChart8.setOption({-->
<!--          visualMap: {-->
<!--            min: _this.min,-->
<!--            max: _this.max,-->
<!--            show: false,-->
<!--            inRange: {-->
<!--              color: ["lightskyblue", "yellow", "orangered"]-->
<!--            }-->
<!--          },-->
<!--          series: [-->
<!--            {-->
<!--              type: "map",-->
<!--              map: "云南",-->
<!--              itemStyle: {-->
<!--                normal: { label: { show: true } },-->
<!--                emphasis: { label: { show: true } },-->
<!--                emphasis: {-->
<!--                  areaColor: "#67C23A" //鼠标进入时的颜色-->
<!--                }-->
<!--              },-->
<!--              data: _this.listArr-->
<!--            }-->
<!--          ]-->
<!--        });-->
<!--      }-->
<!--    }-->
<!--  };-->
<!--</script>-->
<!--<style scoped lang="less">-->
<!--  .maps-container {-->
<!--    width: 100%;-->
<!--    height: 100%;-->
<!--  }-->
<!--</style>-->






<!--<template>-->
<!--  <div class="echarts">-->
<!--    <div :style="{height:'55vh',width:'100%'}" ref="myEchart"></div>-->
<!--  </div>-->
<!--</template>-->
<!--<script>-->
<!--  import echarts from "echarts";-->
<!--  import '../../node_modules/echarts/map/js/province/sichuan' // 引入绵阳地图数据，若无该js文件，先执行第六步生成js文件并复制到此处-->
<!--  export default {-->
<!--    name: "map",-->
<!--    data() {-->
<!--      return {-->
<!--        chart: null-->
<!--      };-->
<!--    },-->
<!--    mounted() {-->
<!--      this.chinaConfigure();-->
<!--    },-->
<!--    beforeDestroy() {-->
<!--      if (!this.chart) {-->
<!--        return;-->
<!--      }-->
<!--      this.chart.dispose();-->
<!--      this.chart = null;-->
<!--    },-->
<!--    methods: {-->
<!--      chinaConfigure() {-->
<!--        let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置-->
<!--        window.onresize = myChart.resize;-->
<!--        window.addEventListener("resize", myChart.resize);-->
<!--        myChart.setOption({ // 进行相关配置-->
<!--          backgroundColor: "transparent",-->
<!--          tooltip: {}, // 鼠标移到图里面的浮动提示框-->
<!--          geo: { // 这个是重点配置区-->
<!--            map: '绵阳', // 地区名-->
<!--            roam: true ,//平移或缩放-->
<!--            label: {-->
<!--              normal: {-->
<!--                show: true,-->
<!--                color:'rgba(255, 255, 255, 0.5)'-->
<!--              },-->
<!--              emphasis: {-->
<!--                color:'#fff'-->
<!--              }-->
<!--            },-->
<!--            itemStyle: {-->
<!--              normal: {-->
<!--                areaColor : '#226DA4',-->
<!--                borderColor: 'rgba(255, 255, 255, 0.5)'-->
<!--              },-->
<!--              emphasis: {-->
<!--                areaColor: "#188FFE",-->
<!--                shadowOffsetX: 0,-->
<!--                shadowOffsetY: 0,-->
<!--                shadowBlur: 20,-->
<!--                borderWidth: 0,-->
<!--                shadowColor: 'rgba(0, 0, 0, 0.5)'-->
<!--              }-->
<!--            }-->
<!--          }-->
<!--        })-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--</script>-->

















